<template>
    <van-popup :show="show" round class="p-3" @click-overlay="closeModal">
        <div class="text-center min-w-80 text-black mb-2 text-xl">转让指定代理</div>
        <form @submit.prevent="submitAdd">
            <div class="">
                转让代理账号
            </div>
            <input class="border w-full box-border p-1 border-black rounded placeholder:text-sm" placeholder="请输入转让代理账号"
                type="text" v-model="formRef.username" required />
            <span v-if="formRef.username" :style="agent ? 'color: #28a745' : 'color: #dc3545'">{{ agent ? '账号有效' :
                '账号无效' }}</span>

            <div v-html="dialog.content" class="text-sm text-gray-400 my-1"></div>

            <div class="text-center flex justify-between items-center my-2 mt-4">
                <button @click="closeModal" type="button" class="rounded bg-[#EFEFEF] text-black py-1 px-3">
                    取消
                </button>
                <button type="submit" class="rounded bg-[#70BABC] text-white py-1 px-3">
                    确认
                </button>
            </div>
        </form>
    </van-popup>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { TransferApi, AgentStatusApi } from '@/apis/payment';
import { showSuccessToast } from 'vant';
import { GetReminderInfo } from '@/utils/system';

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    item: {
        type: Object,
        default: () => { }
    }
})



const emit = defineEmits(['close', 'confirm'])
const formRef = ref({
    orderNo: '',
    username: '',
})

const agent = ref(false)
const dialog = ref({
    title: '',
    content: ''
})

watch(() => formRef.value.username, (val) => {
    if (val) {
        AgentStatusApi(
            val
        ).then((res) => {
            console.log(res)
            agent.value = true
        })
            .catch((err) => {
                console.log(err)
            })

    }
})

onMounted(async () => {
    formRef.value.orderNo = props.item.orderNo
    dialog.value = await GetReminderInfo('app_transfer')
})



function submitAdd() {
    TransferApi(formRef.value.orderNo, formRef.value.username).then(() => {
        showSuccessToast({
            message: '转单成功',
            duration: 1000
        })
        emit('confirm')
        closeModal()
    })
}

function closeModal() {
    emit('close')
}
</script>
<style scoped>
.delete-button {
    height: 100%;
}

:deep(.van-uploader__wrapper) {
    justify-content: center !important;
}

:deep(.van-popover__wrapper) {
    display: block;
}

/* input::placeholder {
    font-size: 12px;
  } */
</style>